<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>user</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/demo/demo.css">
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializeObject.js"></script>
</head>
<body>
    <!--用户编辑栏-->
    <div id="tb" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addUserData()">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="removeUserData()">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveUserData()">Save</a>

        keywords: <input class="easyui-textbox" id="keywords" name="keywords" style="width:110px">

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="searchData()" iconCls="icon-search">Search</a>
    </div>

    <table id="dg"></table>



    <!--添加用户信息弹窗--Start-->
    <div id="dlg" class="easyui-dialog" title="添加用户信息" data-options="iconCls:'icon-add',closed:true" style="width:400px;padding:10px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age" style="width:100%" data-options="label:'Age:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="sex" style="width:100%" data-options="label:'Sex:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="phone" style="width:100%" data-options="label:'Phone:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="tel" style="width:100%" data-options="label:'Tel:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="address" style="width:100%" data-options="label:'Address:'">
            </div>
            <!--加入id的作用是为了防止修改的时候更新它的id-->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'Id:'">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <!--添加用户信息弹窗--End-->



    <script type="text/javascript">
        //添加数据按钮
        function addUserData() {
			$('#dlg').dialog('open');//点击的时候打开弹出
		}

		//删除数据按钮
		function removeUserData() {
			var gss = $('#dg').datagrid('getSelections');//getSelections为方法（Method），没有直接关联的按钮，想操控它的时候用
//				console.log(gss);//以数组的形式打印出所有选中的行
                var ids = [];
                for(var i=0;i<gss.length;i++){
                	ids.push(gss[i]._id);
                }

				$.ajax({//删除
                    method:'post',
                    url:'http://localhost:3000/users/deletes',
                    data:{ids:ids.toString()}
                }).done(function (res) {
					console.log(res.status);
					if(res.status === 200){
                        $.messager.show({
                            title:'信息提示',
                            msg:'删除数据成功',
                            showType:'show'
                        })
                    }else{
						$.messager.show({
							title:'信息提示',
							msg:'请选择要删除的数据',
							showType:'show'
						})
                    }
                    $('#dg').datagrid("reload")
					console.log(11);
				})
		}

		//搜索数据按钮
        function searchData() {
			var keywords = $("#keywords").val();
			$('#dg').datagrid('options').queryParams={name: keywords};
			$("#dg").datagrid('reload');
		}


        //表单
        $('#dg').datagrid({
//			toolbar:toolbar,//设置工具条，无需html代码
            pagination:true,//设置分页栏，无需html代码
            fit:true,
            checkbox:true,//该行被选中
            method:'post',//默认posts
            url:'http://localhost:3000/users/list',//建好后台后用的
            // url:'../data/datagrid_data.json',//未建数据的时候测试用的
            columns:[[
				{field:'ck',checkbox:true},
                {field:'_id',title:'ID',width:200},
                {field:'name',title:'Name',width:80},
                //自己添加的表内容
				{field:'age',title:'Age',width:50},
				{field:'sex',title:'Sex',width:50},
				{field:'phone',title:'Phone',width:100},
				{field:'tel',title:'Tel',width:100},
				{field:'email',title:'Email',width:100},
				{field:'address',title:'Address',width:100},
				{field:'opt',title:'操作',width:80,
                    formatter:function (value,row,index) {
                        return "<a href='javascript:void(0)' onclick='editUserData("+index+")'>Edit</a>&nbsp;&nbsp;<a href='javascript:void(0)' onclick='deleteUserData("+index+")'>Delete</a>"
					}
                },
            ]],
//		    双击编辑
			onDblClickRow: function(index,row){
				//console.log(index, row);//index为该行在这一页的下标，row为当前行的表单数据
                $('#dlg').dialog('open')
				$('#ff').form('load',row);//加载该行的数据
			}

        });


		//点击编辑按钮
		function editUserData(index) {
//		console.log(index);//index为该行在这一页的下标，row为当前行的表单数据
			var row = $("#dg").datagrid('getRows');
//		console.log(rows[index]);//该行的信息
			$('#dlg').dialog('open')
			$('#ff').form('load',row[index]);//加载该行的数据
		}

		//点击删除按钮
		function deleteNewsData(index) {
			var rows = $("#dg").datagrid('getRows');
			var idOne = rows[index]._id;
			$.ajax({//删除
				method:'delete',
				url:'http://localhost:3000/news/data/'+idOne,
				data:{ids:idOne.toString()}
			}).done(function (res) {
				if(res.status === 200){
					$.messager.show({
						title:'信息提示',
						msg:'删除数据成功',
						showType:'show'
					})
				}else{
					$.messager.show({
						title:'信息提示',
						msg:'请选择要删除的数据',
						showType:'show'
					})
				}
				$('#dg').datagrid("reload")
				console.log(11);
			})

		}

        //add弹窗
		function submitForm(){
			$('#ff').form('submit',{
				onSubmit:function () {
                    if($(this).form('enableValidation').form('validate')){
                    	//ajax新增提交
						var data = $('#ff').serializeObject();
//						console.log(data);
                        if(data._id&&data._id.trim().length>0){//如果id存在点提交的时候就修改内容
							$.ajax({//修改新增数据
								method:'put',
								url:'http://localhost:3000/users/data/'+data._id,
								data:data,
							}).done(function (res) {//添加完成之后，删除弹窗，刷新改页面更新添加的数据
								$('#dlg').dialog('close');
								$('#dg').datagrid('reload');
							})

                        }else{//id不存在，增加内容
                            delete data._id;//注意新增一定要删掉data._id，否则新增不进去
							$.ajax({//提交新增数据
								method:'post',
								url:'http://localhost:3000/users/data',
								data:data,
							}).done(function (res) {//添加完成之后，删除弹窗，刷新改页面更新添加的数据
								$('#dlg').dialog('close');
								$('#dg').datagrid('reload');
							})
                        }

					}else{
						$.messager.show({
							title:'信息提示',
							msg:'提交有误，请重新输入',
							showType:'show'
						});
                    }
				}
            });
		}
		function clearForm(){
			$('#ff').form('clear');
		}

    </script>

</body>
</html>
